<template>
	<div class="detail">
	<div class="left">
		<articleContent></articleContent>

	</div>
	<div class="right">
		<Author></Author>
		<Recommend></Recommend>

	</div>
	</div>
</template>

<script>
import Author from '@/components/author/author.vue';
import Recommend from '@/components/recommend/recommend.vue';
import ArticleContent from '@/components/articleContent/articleContent';
	export default {
		components:{
			Author,
			Recommend,
			ArticleContent
		}
	}
</script>

<style scoped>
.detail{
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 2vh;
	margin-bottom: 2vh;
}
.detail .left{
	height: 100%;
	width: 50vw;
	/* background: rgb(145, 226, 159); */
	margin-right: 0.5vw;
}
.detail .right{
	height: 100vh;
	width: 20vw;
	/* background: rgb(164, 217, 233); */
}

</style>